<template>
  <div class="padding-t-20">
    <q-table
      class="users-table scroll my-sticky-virt scroll-table myTable inherit"
      style="margin: 0"
      :style="{ maxHeight }"
      :columns="tableColumns"
      :data="tableData"
      row-key="id"
      :pagination.sync="pagination"
      no-data-label="暂无数据"
      color="primary"
      :loading="isTableLoading"
      :hide-bottom="tableData.length > 0"
    >
      <template v-slot:body-cell-repairOrder="props">
        <q-td>
          <q-btn flat color="primary" :label="props.row.repairOrder" @click="toRepairOrder(props.row.repairOrder)" />
        </q-td>
      </template>
      <template v-slot:body-cell-status="props">
        <q-td>
            <set-color :options="statusOptions" :colorType="props.row.status"/>
        </q-td>
      </template>
    </q-table>
    <!--  分页-->
    <yz-pagination v-model="pagination" @onSearch="getList"/>
  </div>
</template>

<script>
import { getRepairList } from 'src/boot/tpm/equipment-record'

export default {
  name: 'repair-order',
  components: {
  },
  props: {
    data: Object,
    maxHeight: {
      type: String,
      default: '400px'
    }
  },
  data () {
    return {
      isTableLoading: false,
      // 表格分页配置
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      id: null,
      // 表格列
      tableColumns: [
        { name: 'repairOrder', field: 'repairOrder', label: '维修单号', align: 'left' },
        { name: 'deviceNum', field: 'deviceNum', label: '设备编号', align: 'left' },
        { name: 'deviceName', field: 'deviceName', label: '设备名称', align: 'left' },
        { name: 'deviceTypeName', field: 'deviceTypeName', label: '设备类型', align: 'left' },
        { name: 'workShop', field: 'workShop', label: '所在车间', align: 'left' },
        { name: 'status', field: 'status', label: '维修状态', align: 'left' },
        { name: 'receivingUserName', field: 'receivingUserName', label: '维修人', align: 'left' }
      ],
      tableData: []
    }
  },
  watch: {
    data: {
      handler (val) {
        if (val.id !== this.id) {
          this.id = val.id
          this.pagination.page = 1
          this.pagination.pageSize = 15
          this.getList()
        }
      },
      deep: true,
      immediate: true
    }
  },
  created () {
  },
  computed: {
    statusOptions () {
      return this.$getEnum(this.Enums.DEVICE_REPAIR_STATUS)
    }
  },
  methods: {
    getList () {
      let params = {
        pageNum: this.pagination.page,
        pageSize: this.pagination.pageSize,
        deviceId: this.id
      }
      this.isTableLoading = true
      getRepairList(params).then(res => {
        console.log(res, 'res')
        res.records.forEach(item => {
          item.deviceNum = this.$utils.label(item.deviceNum)
          item.deviceName = this.$utils.label(item.deviceName)
          item.deviceTypeName = this.$utils.label(item.deviceTypeName)
          item.workShop = this.$utils.label(item.workShop)
          item.receivingUserName = this.$utils.label(item.receivingUserName)
        })
        this.tableData = res.records
        this.pagination.rowsNumber = res.total
      }).finally(() => {
        this.isTableLoading = false
      })
    },
    // 跳转维修列表
    toRepairOrder (repairOrder) {
      this.$router.push({
        name: 'repairList',
        params: {
          repairOrder: repairOrder
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
